<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Role</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <style>
        em {
           font-style: normal;
            color: red;
        }
    </style>
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
</head>
<body>

    <!---------------添加框 start-------------->
    <form id="addForm" lay-filter='addFormFilter' style="display: none" class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

        <div class="layui-form-item">
            <label class="layui-form-label">名字</label>
            <div class="layui-input-inline">
                <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择权限</label>
            <div class="layui-input-inline">
                <div id="myTree" name="role"></div>
            </div>
        </div>



        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-demo="getChecked" lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <!---------------添加框 end-------------->

    <!---------------修改框 start-------------->
    <form id="updateForm" lay-filter='updateFormFilter' style="display: none" class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

        <div class="layui-form-item">
            <label class="layui-form-label">名字</label>
            <div class="layui-input-inline">
                <input type="hidden" name="id">
                <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下拉选择框</label>
            <div class="layui-input-inline">
                <select name="roleId" lay-filter="aihao">
                    <option value="1">superadmin</option>
                    <option value="2">admin</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <!---------------修改框 end-------------->





    <!---------------歌曲表格 start-------------->
    <%--<form class="layui-form" lay-filter='queryFilter'> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-inline">
            <input type="text" id="query" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item">

            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>--%>
    <table id="songTable" lay-filter="tableFilter"></table>
    <!---------------歌曲表格 end-------------->




    <!---------------工具栏 start-------------->
    <script type="text/html" id="role">
        {{#  if(d.role.roleId == 1){                }}
            <div class="layui-btn layui-btn-xs layui-btn-radius  layui-btn-normal">{{d.role.roleName}}</div>
        {{#   }else if(d.role.roleId == 2){         }}
            <div class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm">{{d.role.roleName}}</div>
        {{#   }                                     }}


    </script>
    <script type="text/html" id="images">
        <img style="width: 50px" src="/cmfz{{d.bannerImageUrl}}">
    </script>
    <script type="text/html" id="toolbar1">
        <div class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</div>
        <div class="layui-btn layui-btn-xs" lay-event="update">更新</div>
    </script>
    <script type="text/html" id="toolbar2">
        <%--<div class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteMany">批量删除</div>--%>
        <div class="layui-btn layui-btn-xs" lay-event="add">添加</div>
    </script>
    <!---------------工具栏 end-------------->


    <script>
        //--------------- 动态查询下拉框 start --------------------
        /*$.ajax({
            url:'singer/showAll',
            dataType:'json',
            success:function (result) {
                console.log(result);
                var h = '';
                $.each(result,function (i,val) {
                    h += '<option value='+val.id+'>'+val.name+'</option>';
                })
                $('#addSelect').html(h);
                $('#updateSelect').html(h);

            }
        });*/

        //--------------- 动态查询下拉框 end --------------------



        layui.use(['table','layer','form','laydate','upload','tree','util'], function(){
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            var tree = layui.tree;
            var util = layui.util;

            //执行一个laydate实例
            laydate.render({
                elem: '#addTime' //指定元素
                ,trigger: 'click' //采用click弹出
            });
            laydate.render({
                elem: '#updateTime' //指定元素
                ,trigger: 'click' //采用click弹出
            });

            var upload = layui.upload;


            //---------------树控件 start-------------
            var tree = tree.render({
                elem:'#myTree',
                data:[],
                showCheckbox:true,
                click:function (res) {
                    console.log(res.data);
                }
            })
            $.ajax({
                url:'${pageContext.request.contextPath}/tree/show',
                dataType:'json',
                success:function (result) {
                    tree.reload({
                        data:result
                    });
                }
            });

            //---------------树控件 end-------------

            //--------------搜索start----------
            form.on('submit(queryFilter)',function () {
                console.log(111);
                console.log($('#query').val());
                table.reload('songTable', {
                    url: 'poety/show'
                    ,where: {
                        titles:$('#query').val()
                    } //设定异步数据接口的额外参数
                    ,page:{
                        curr:1
                    }
                    //,height: 300
                });



                return false;
            })



            //--------------搜索end----------


            //--------------上传文件start----------
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: '${pageContext.request.contextPath}/banner/upload' //上传接口
                ,accept: 'images'
                ,done: function(res){
                    //上传完毕回调
                    console.log(res);
                    form.val('addFormFilter',{
                        bannerImageUrl:res.imageUrl
                    })

                }
                ,error: function(){
                    //请求异常回调
                    layer.msg('上传失败');
                }
            });
            var uploadInst = upload.render({
                elem: '#test2' //绑定元素
                ,url: '${pageContext.request.contextPath}/banner/upload' //上传接口
                ,accept: 'images'
                ,done: function(res){
                    //上传完毕回调
                    console.log(res);
                    form.val('updateFormFilter',{
                        bannerImageUrl:res.imageUrl
                    })
                }
                ,error: function(){
                    //请求异常回调
                    layer.msg('上传失败');
                }
            });
            //--------------上传文件end----------


            //第一个实例
            table.render({
                elem: '#songTable'
                ,limit:5
                ,limits:[3,5,8]
                ,toolbar:'#toolbar2'
                ,url: '${pageContext.request.contextPath}/role/show' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {type:'checkbox', width:120}
                    ,{field: 'roleId', title: '编号', width:160}
                    ,{field: 'roleName', title: '角色名字', width:200}
                    ,{title:'操作',toolbar:'#toolbar1', width: 250}
                ]]
            });

            //---------- 删除,更新 start------------
            table.on('tool(tableFilter)',function (obj) {
                if(obj.event == 'delete'){
                    console.log(obj.data);
                    $.ajax({
                        url:'${pageContext.request.contextPath}/admin/delete',
                        data:'id='+obj.data.id,
                        dataType:'json',
                        success:function (result) {
                            if(result){
                                layer.msg('删除成功');
                                table.reload('songTable',{
                                    page:{
                                        curr:1
                                    }
                                });
                            }else{
                                layer.msg('删除失败');
                                table.reload('songTable',{
                                    page:{
                                        curr:1
                                    }
                                });
                            }
                        }
                    });
                } else if (obj.event == 'update') {
                   console.log(obj.data.id)
                     $.ajax({
                        url:'${pageContext.request.contextPath}/admin/selectOne',
                        data:'id='+obj.data.id,
                        dataType:'json',
                        success:function (result) {
                            console.log(result);
                            form.val('updateFormFilter',{
                                id:result.id,
                                username:result.username,
                                password:result.password
                            })
                        }

                    });
                    layer.open({
                        type:1,
                        content:$('#updateForm'),
                        title:'更新',
                        area:['500px','500px']
                    });
                }

            });

            form.on('submit(updateFormFilter)',function () {
                $.ajax({
                    url:'${pageContext.request.contextPath}/admin/update',
                    data:$('#updateForm').serialize(),
                    dataType:'json',
                    success:function (result) {
                        console.info($('#updateForm').serialize());
                        if(result.isUpdate){
                            layer.closeAll();
                            layer.msg('更新成功');
                            table.reload('songTable',{
                                page:{
                                    curr:1
                                }
                            });
                        }else{
                            layer.closeAll();
                            layer.msg('更新失败');
                            table.reload('songTable',{
                                page:{
                                    curr:1
                                }
                            });
                        }
                    }
                });
                return false;
            })


            //---------- 删除,更新 end------------


            //---------- 批量删除,添加 start------------
            table.on('toolbar(tableFilter)',function (obj) {
                console.log(obj.event);
                if(obj.event == 'add'){
                    layer.open({
                        type:1,
                        content:$('#addForm'),
                        title:'添加',
                        area:['500px','500px']
                    });

                }
            });

            var ids = [];



            //按钮事件
            util.event('lay-demo', {
                getChecked: function(othis){
                    var checkedData = tree.getChecked('#myTree'); //获取选中节点的数据
                    console.log(JSON.stringify(checkedData));
                    var ids = [];
                    if (checkedData[0].children.length != 0){

                        for (var i = 0; i < checkedData[0].children.length; i++) {
                            ids.push(checkedData[0].children[i].id)

                        }
                    }
                    ids.push(checkedData[0].id);
                    console.log(ids);

                }

            });


            form.on('submit(addFormFilter)',function () {
                console.log($('#addForm').serialize());
                /*$.ajax({
                    url:'${pageContext.request.contextPath}/roles/add',
                    data:$('#addForm').serialize()+'&data='+checkedData[0],
                    dataType:'json',
                    success:function (result) {
                        if(result.isAdd){
                            layer.closeAll();
                            layer.msg('添加成功');
                            table.reload('songTable',{
                                page:{
                                    curr:1
                                }
                            });
                        }else{
                            console.log('add false');
                            layer.closeAll();
                            layer.msg('添加失败');
                            table.reload('songTable',{
                                page:{
                                    curr:1
                                }
                            });
                        }
                    },
                    error:function (result) {
                        console.log('add false==='+result);
                        layer.closeAll();
                        layer.msg('添加程序出错失败');
                        table.reload('songTable',{
                            page:{
                                curr:1
                            }
                        });
                    }
                });*/

                return false;
            })







            //---------- 批量删除,添加 end------------

        });
    </script>



</body>
</html>